<template>
  <section>
    <el-row>
      <el-col :span="24">
        <div class="left_item">
          <div class="border_title">
            <h3>栏目列表</h3>
          </div>
          <el-tree
            :data="myColumnList"
            :props="defaultProps"
            ref="tree"
            node-key="id"
            class="common_tree"
            :highlight-current="showTree"
            :default-expanded-keys="[defaultExpandKeys]"
            :style="maxHeight"
            @node-click="handleNodeClick"
            :expand-on-click-node="false"
          ></el-tree>
        </div>
        <div class="right_item">
          <el-card
            id="first"
            shadow="never"
            style="min-height: 80px;margin-bottom: 10px;"
          >
            <el-form inline class="btn_operate">
              <el-row class="ml20">
                <el-col :span="20">
                  <el-form-item>
                    <el-button
                      type="primary"
                      icon="el-icon-circle-plus"
                      @click="addArticle()"
                      :loading="loading"
                      class="radius_btn"
                      >添加文章
                    </el-button>
                    <!-- <el-button
                      type="primary"
                      icon="el-icon-check"
                      @click="auditPass(0)"
                      :loading="loading"
                      class="radius_btn"
                      >审核通过
                    </el-button>
                    <el-button
                      type="danger"
                      icon="el-icon-close"
                      @click="auditPass(1)"
                      :loading="loading"
                      class="radius_btn"
                      >审核不通过
                    </el-button> -->
                    <el-button
                      type="primary"
                      icon="el-icon-document-copy"
                      @click="copyArticle()"
                      class="radius_btn"
                      :loading="loading"
                      >复制
                    </el-button>
                    <!-- <el-button
                      icon="el-icon-sort"
                      type="primary"
                      @click="setSort()"
                      :loading="loading"
                      class="radius_btn"
                      >排序
                    </el-button> -->
                    <el-button
                      type="primary"
                      icon="el-icon-view"
                      @click="preview()"
                      :loading="loading"
                      class="radius_btn"
                      >预览
                    </el-button>
                    <el-button
                      type="primary"
                      icon="el-icon-top"
                      @click="setTop(0)"
                      :loading="loading"
                      class="radius_btn"
                      >置顶
                    </el-button>
                    <el-button
                      type="danger"
                      icon="el-icon-bottom"
                      @click="setTop(1)"
                      :loading="loading"
                      class="radius_btn"
                      >取消置顶
                    </el-button>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item class="mr20 sh">
                    <el-input
                      v-model="articleDto.keywords"
                      placeholder="请输入文章关键字"
                      clearable
                    >
                      <i
                        slot="suffix"
                        class="fa fa-search mr10"
                        @click="search"
                      ></i>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-card>
          <el-card shadow="never" style="height:700px;">
            <!-- <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="全部" name="all"></el-tab-pane>
              <el-tab-pane label="审核中" name="new"></el-tab-pane>
              <el-tab-pane label="已审核" name="audit"></el-tab-pane>
              <el-tab-pane label="未通过" name="refuse"></el-tab-pane>
            </el-tabs> -->
            <page-table
              style="margin-top: 20px;"
              ref="multipleSelection"
              :page-data="articleList"
              :loading="loading"
              :do-get-page-data="getArticleList"
              :select-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="50"></el-table-column>
              <el-table-column
                prop="id"
                label="文章编号"
                width="100"
                align="center"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                prop="title"
                label="文章标题"
                align="center"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <a class="article_title_a" @click="articleEdit(scope.row)">
                    {{ scope.row.title }}
                  </a>
                </template>
              </el-table-column>
              <el-table-column
                prop="createUserName"
                label="发布人"
                align="center"
                width="100"
                show-overflow-tooltip
              ></el-table-column>
              <!-- <el-table-column
                prop="status"
                label="审核状态"
                align="center"
                width="150"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <sz-badge
                    :value="scope.row.status | keyText('ARTICLE_STATUS')"
                    :type="statusStyle(scope.row)"
                  >
                  </sz-badge>
                </template>
              </el-table-column> -->
              <el-table-column
                prop="createTime"
                label="发布时间"
                width="200"
                align="center"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  {{ scope.row.createTime | formatTime("yyyy-MM-dd HH:mm") }}
                </template>
              </el-table-column>
              <el-table-column
                label="管理"
                width="100"
                align="center"
                fixed="right"
              >
                <template slot-scope="scope">
                  <el-tooltip content="删除" placement="top">
                    <el-button
                      size="mini"
                      icon="el-icon-delete"
                      @click="delArticle(scope.row)"
                    ></el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
            </page-table>
          </el-card>
        </div>
      </el-col>
    </el-row>
    <el-dialog
      :visible.sync="showCopyDialog"
      v-if="showCopyDialog"
      @close="search"
      title="请选择新栏目:"
      width="25%"
    >
      <copy-article
        @close="onEditorClose"
        :ids="multipleSelection"
      ></copy-article>
    </el-dialog>
    <el-dialog
      class="sort_dialog"
      title="调整文章顺序"
      append-to-body
      width="60%"
      :visible.sync="sortDialogVisible"
      v-if="sortDialogVisible"
      destroy-on-close
    >
      <sort-article
        @close="onSortArticleClose"
        :drag-article-ids="selectArticleIds"
        :column-id="articleDto.categoryId"
      ></sort-article>
    </el-dialog>
  </section>
</template>
<script>
import { mapGetters } from "vuex";
import _ from "lodash";
import CopyArticle from "./copyArticle";
import ArticleEditor from "./ArticleEditor";
import SortArticle from "./sortArticle";
import Api from "api/api";

export default {
  name: "essay",
  created() {
    this.getColumnList();
    this.getArticleList();
  },
  mounted() {},
  data() {
    return {
      activeName: "all",
      rightMenuShow: false,
      theme: "",
      logArticleId: 0,
      // showLogDialog: false,
      sortDialogVisible: false,
      curArticleId: 0,
      showCopyDialog: false,
      showTree: true,
      top: 0,
      left: 0,
      pageHeight: window.innerHeight,
      loading: false,
      defaultProps: {
        children: "children",
        label: "name"
      },
      multipleSelection: [], // 多选数据
      articleDto: {
        pageIndex: "",
        pageSize: 10,
        itemId: "",
        keywords: "",
        status: ""
      },
      selectArticleIds: [],
      categoryNow: "", //当前选择栏目
      statusNow: "" //当前选择状态
    };
  },
  computed: {
    ...mapGetters({
      myColumnList: "myColumnList",
      articleList: "articleList"
    }),
    maxHeight() {
      return { height: this.pageHeight - 200 + "px" };
    },
    defaultExpandKeys() {
      let tem = [];
      if (this.myColumnList !== null && this.myColumnList.length > 0) {
        this.myColumnList.map(item => {
          tem.push(item.id);
          if (item.children) {
            item.children.map(child => {
              tem.push(child.id);
            });
          }
        });
      }
      return tem;
    }
  },
  methods: {
    //通过审核状态查询分页数据
    handleClick(tab, event) {
      let status = "all";
      switch (tab.paneName) {
        case "all":
          status = "";
          break;
        case "new":
          status = "AUDIT";
          break;
        case "audit":
          status = "PUBLISHED";
          break;
        case "refuse":
          status = "REJECT";
          break;
      }
      this.articleDto = {
        pageIndex: "",
        pageSize: 10,
        itemId: this.categoryNow,
        keywords: "",
        status: ""
      };
      this.statusNow = status;
      this.articleDto.status = this.statusNow;
      this.search();
    },
    // 检查编辑界面是否关闭
    checkEditorClose() {
      let code = setInterval(() => {
        let refresh = window.localStorage.getItem("refresh");
        if (refresh === "666") {
          window.localStorage.setItem("refresh", "777");
          clearInterval(code);
          this.search();
        }
      }, 2000);
    },
    // 排序弹窗关闭事件
    onSortArticleClose() {
      this.sortDialogVisible = false;
      this.search();
    },
    // 状态颜色设置
    statusStyle(row) {
      let cls = "";
      switch (row.status) {
        case "PUBLISHED":
          cls = "success";
          break;
        case "REJECT":
          cls = "danger";
          break;
      }
      return cls;
    },
    // 关闭日志回调
    onLogClose() {
      this.showLogDialog = false;
    },
    // 打开处理日志
    showLog() {
      if (this.multipleSelection.length !== 1) {
        this.warning("请选择一篇文章");
        return;
      }
      let id;
      this.multipleSelection.map(item => {
        id = item.articleID;
      });
      this.logArticleId = id;
      this.showLogDialog = true;
    },
    //  预览
    preview() {
      if (this.multipleSelection.length !== 1) {
        this.warning("请选择一篇文章");
        return;
      }
      let id;
      this.multipleSelection.map(item => {
        id = item.id;
      });
      this.$router.push({ name: "essayDetail", query: { key: id } });
    },
    // 排序
    setSort() {
      if (this.multipleSelection.length == 0) {
        this.warning("请至少选择一篇文章");
        return;
      }
      let tem = [];
      this.multipleSelection.map(item => {
        tem.push(item.id);
      });
      this.selectArticleIds = tem;
      this.sortDialogVisible = true;
    },
    // 置顶
    setTop(type) {
      if (this.multipleSelection.length !== 1) {
        this.warning("请选择一篇文章");
        return;
      }
      let id;
      this.multipleSelection.map(item => {
        id = item.id;
      });
      this.loading = true;
      this.API.topId({
        id,
        type
      }).then(() => {
        this.search();
        this.loading = false;
        this.success(type == 0 ? "置顶成功" : "取消置顶成功");
      });
    },
    // 栏目点击事件
    handleNodeClick(val) {
      this.articleDto = {
        pageIndex: "",
        pageSize: 10,
        itemId: "",
        keywords: "",
        status: this.statusNow
      };
      this.categoryNow = val.id;
      this.articleDto.itemId = this.categoryNow;
      this.getArticleList();
    },
    //获取文章列表
    getArticleList(val) {
      this.loading = true;
      let tem = Object.assign(this.articleDto, val);
      this.$store.dispatch("listArticleUsingPOSTS", tem).then(ret => {
        this.loading = false;
      });
    },
    // 获取栏目列表
    getColumnList() {
      this.$store.dispatch("getMyColumnList").then(ret => {
        if (ret.data && ret.data.length > 0) {
          //默认选中第一个栏目
          this.$nextTick().then(() => {
            const firstNode = document.querySelector(".el-tree-node");
            firstNode.click();
          });
        }
      });
    },
    //添加文章
    addArticle() {
      console.log("this.articleDto.itemId", this.articleDto.itemId);
      if (this.articleDto.itemId == "") {
        this.warning("请选择一个栏目");
        return;
      }
      let data = "/editor.html#/";
      if (this.articleDto.itemId) {
        data += "?columnId=" + parseInt(this.articleDto.itemId);
      }
      window.open(data, "_blank");
      this.checkEditorClose();
    },
    //获取多选文章数据
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //审核文章
    async auditPass(type) {
      if (this.multipleSelection.length == 0) {
        this.warning("请至少选择一篇文章");
        return;
      }
      let confirm = await this.confirmForm(
        type == 0 ? "是否确认审核通过" : "是否确认审核不通过"
      );
      if (confirm === "cancel") return;
      let articleId = [];
      this.multipleSelection.map(item => {
        articleId.push(item.id);
      });
      this.loading = true;
      this.$store
        .dispatch("approveArticleUsingPOSTS", { body: { articleId, type } })
        .then(() => {
          this.search();
          this.loading = false;
          this.success(type == 0 ? "审核通过成功" : "审核不通过成功");
        });
    },
    //编辑
    articleEdit(row) {
      window.open("/editor.html#/?articleID=" + row.id, "_blank");
      this.checkEditorClose();
    },
    //删除文章
    delArticle(row) {
      this.$confirm("确认删除当前文章?", "提示", {})
        .then(() => {
          let tem = {
            id: row.id
          };
          this.$store.dispatch("deleteArticleUsingPOSTS", tem).then(() => {
            this.$message({
              message: "删除成功",
              type: "success"
            });
            this.loading = false;
            this.search();
          });
        })
        .catch(() => {});
    },
    //查询
    search() {
      this.getArticleList(1);
    },
    // 复制文章到其他栏目
    copyArticle() {
      if (this.multipleSelection.length == 0) {
        this.warning("请至少选择一篇文章");
        return;
      }
      let tem = [];
      this.multipleSelection.map(item => {
        tem.push(item.id);
      });
      this.selectArticleIds = tem;
      this.showCopyDialog = true;
    },
    //关闭复制dialog
    onEditorClose() {
      this.showCopyDialog = false;
    }
  },
  components: {
    CopyArticle,
    ArticleEditor,
    SortArticle
  }
};
</script>

<style scoped lang="less">
.left_item {
  height: 760px;
  display: flex;
  flex-flow: column;
  float: left;
  width: 13.5%;
  background-color: white;
}

.right_item {
  height: 762px;
  display: flex;
  float: right;
  flex-flow: column;
  width: 85.9%;
}

.border_title {
  width: 100%;
  text-align: center;
  border-bottom: 1px solid rgba(224, 238, 249, 1);
  cursor: pointer;
}

.status_new {
  color: #0075ff;
}

.m {
  width: 100%;
  margin: 0;
}

i {
  color: #2699fb;
}

.common_tree {
  padding-top: 20px;
  width: 100%;
  font-size: 15px;
  color: #333333;
}

/deep/ .el-tree-node__content {
  height: 55px;
}

/deep/ .el-tree-node__label {
  font-size: 16px;
  padding-left: 25%;
  font-family: Source Han Sans CN;
}

/deep/ .el-tabs__header {
  margin: 15px 0px -16px !important;
}

.btn_operate {
  /deep/ .el-form-item {
    margin-bottom: 0;
  }
}

.report_dialog {
  /deep/ .el-tree-node {
    margin: 10px 0;
  }

  /deep/ .el-dialog__header {
    display: none;
  }

  /deep/ .el-dialog__body {
    padding: 0;
  }

  z-index: 2501 !important;
}

.el-dialog__body {
  padding: 20px 10px !important;
}

.menu1 {
  position: fixed;
  height: auto;
}

.el-checkbox {
  display: block;
  height: 20px;
  line-height: 20px;
  margin-right: 0;
  font-size: 12px;
  padding: 2px 10px;
  border: 1px solid transparent;
}

.el-checkbox:hover {
  border-radius: 3px;
  border: 1px solid #999999;
}

.wanner {
  margin-left: -35px;
  width: 200px;
}

/deep/ .el-tabs__item {
  font-size: 15px;
  margin: 5px 0;
}

/deep/ .el-card__body {
  padding: 0 10px;
}

/deep/ #first .el-card__body {
  padding: 18px 0;
}

.radius_btn {
  border-radius: 6px;
  margin: 5px;
  display: inline;
}

/deep/
  .el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
  background-color: #f4faff !important;
  opacity: 1 !important;
  color: #0075ff;
}
</style>
